<template>
  <div style="border: 1px black solid">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column fixed prop="product_name" label="商品名称"/>
      <el-table-column prop="sp1" label="型号"/>
      <el-table-column prop="sp2" label="颜色"/>
      <el-table-column prop="price" label="单价"/>
      <el-table-column prop="quantity" label="数量"/>
      <el-table-column prop="zip" label="小计">
        <template slot-scope="scope">
          <el-input v-model="scope.row.quantity*scope.row.price" readonly/>
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="操作">
          <template slot-scope="scope">
            <el-button @click="removeProduct(scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;margin-left: -1100px">
      <el-button type="primary" @click="toggleSelection(1)">全选</el-button>
    </div>
    <div style="float: right;margin-top: -160px;margin-right: 100px">
      <span style="color: red;font-weight: bold">总计：￥</span>
      <el-input type="number" v-model="countPrice" style="width: 100px" readonly/>
      <el-button @click="dialogFormVisible=true">结算</el-button>
    </div>

    <el-dialog title="收货人信息" :visible.sync="dialogFormVisible">
      <el-form :model="fromList">
        <el-form-item label="收货人姓名" :label-width="formLabelWidth">
          <el-input v-model="fromList.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话" :label-width="formLabelWidth">
          <el-input v-model="fromList.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人地址" :label-width="formLabelWidth">
          <el-input v-model="fromList.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Cart",
  data () {
    return {
      tableData: [],
      num: 1,
      max: 10,
      count1: 0,
      multipleSelection: [],
      cartList: [],
      countPrice: 0,
      dialogFormVisible: false,
      fromList: {
        name: '',
        phone: '',
        address: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getCartList();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    toggleSelection(value) {
      if (value==1) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let nums=0;
      for(let i=0; i<this.multipleSelection.length;i++){
        nums+=this.multipleSelection[i].price*this.multipleSelection[i].quantity;
      }
      this.countPrice=nums;
      // console.log(this.countPrice)
    },
    getCartList(){
      let param=new URLSearchParams();
      param.append("userid",sessionStorage.getItem("user_id"));
      this.$http.post("/front/cart/selectCart",param).then(data => {
        console.log(data);
        this.tableData=data;
      })
    },
    removeProduct(id){
      let param=new URLSearchParams();
      param.append('userid',sessionStorage.getItem("user_id"));
      param.append("id",id);
      this.$confirm('是否要删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/front/cart/removeProductById",param).then(data => {
          if (data){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getCartList();
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    toSubmit(){
      let param1=new URLSearchParams();
      param1.append('id',sessionStorage.getItem("user_id"));
      param1.append('username',sessionStorage.getItem("username"));
      param1.append('address',this.fromList.address);
      param1.append('name',this.fromList.name);
      param1.append('phone',this.fromList.phone);
      param1.append('countPrice',this.countPrice);

      if (this.fromList.phone.length!=11){
        this.$message({
          type: 'error',
          message: '手机号格式不正确'
        });
      }else if(this.fromList.name=="" || this.fromList.name==undefined || this.fromList.address==""
      || this.fromList.address==undefined){
        this.$message({
          type: 'error',
          message: '信息不能为空'
        });
      }else {
        this.$confirm('是否要去结算?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户信息
          this.$http.post("/front/order/addOrder",param1).then(data => {
            // console.log(data);
            //订单商品信息
            let param2=new URLSearchParams();
            let ids="";
            for(let i=0;i<this.multipleSelection.length;i++){
              // console.log("-----------------")
              // console.log(this.multipleSelection[i])
              ids=ids+this.multipleSelection[i].id+",";
            }
            param2.append("ids",ids.substr(0,ids.lastIndexOf(",")));
            param2.append("order_sn",data.order_sn);
            param2.append("oid",data.id);
            this.$http.post("/front/order/addOrderItem",param2).then(data => {
              if (data){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$router.push("/order");
              }else{
                this.$message({
                  type: 'error',
                  message: '添加失败!'
                });
              }
            })

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }

    }
  }
}
</script>

<style scoped>

</style>
